<template lang="">
  <div>
      城市: 
      <table>
            <tr>
                <td v-for='i in citylist'>
                    <button @click='changecity(i.id)' :class="i.id == cityid?'active':''">
                        {{i.name}}
                    </button>
                </td>
            </tr>
        </table>

      商品信息:
      <table>
          <tr>
              <td>标题</td>
              <td>
                  <button @click='priceoroder'>
                      价格
                  </button>
              </td>
              <td></td>
          </tr>
          <tr v-for='i in sceniclist'>
              <td>{{i.title}}</td>
              <td>{{i.price}}</td>
              <td></td>
          </tr>
      </table>

      <van-pagination  
      :totle-items='total'
      :items-pre-page='2'
      v-model='page'
      @change='change'
      />
  </div>
</template>

<script>
export default {
    data(){
        return{
            citylist:[],
            sceniclist:[],
            cityid:0,
            page:1,
            total:0,
            sort:'asc'
        }
    },
    methods:{
        //获取城市信息
        getcitylist(){
            this.axios.get('cityim').then(res=>{
                this.citylist = res.data.list
            })
        },
        //获取景点信息
        getsceniclist(){
            this.axios.get('prom?cityid='+this.cityid+'&page='+this.page).then(res=>{
                this.sceniclist = res.data.list
                this.total=res.data.total
            })
        },
        // 点击城市,展示城市下的景点
        changecity(id){
            this.cityid = id
            this.page = 1
            this.getsceniclist()
        },
        // change
        change(val){
            this.page = val
            this.getsceniclist()
        },
        // 排序点击相反操作
        priceoroder(){
            if (this.sort == 'asc'){
                this.sort = 'desc'
            }else{
                this.sort = 'asc'
            }
            this.getsceniclist()

        }
    },
    mounted(){
        this.getcitylist()
        this.getsceniclist()
    },
}
</script>

<style lang="">
.active{
    background-color: #daf0a8;
}
</style>